<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/react.development.js"></script>
	<!-- <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script> -->
	<script src="js/react-dom.development.js"></script>
	<!-- <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> -->
	<!-- <script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script> -->
	<script src="js/browser.min.js"></script>
	<script src="js/vue.js"></script>
</head>

<body>

	<div id="vueArea">
		<my-vue-tag :prop1="data1" :prop2="data2">
			</my-tag>
	</div>
	<script type="text/javascript">
		Vue.component('myVueTag', {
			props: ['prop1', 'prop2'],
			data: function () {
				return {
					state1: "状态1",
					state2: "状态2"
				};
			},
			methods:{
				buttonClick:function(){}
			},
			template: '<div v-on:click="buttonClick" style="background-color:#ffeeaa">Vue自定义组件，属性1：{{prop1}}，属性2：{{prop2}}，状态1：{{state1}}，状态2：{{state2}}。</div>'
		});
		new Vue({
			el: "#vueArea",
			data: {
				data1: "子组件属性1",
				data2: "子组件属性2",
			}
		});
	</script>
	<br /><br />


	<div id="reactArea"></div>
	<script type="text/babel">
		class MyReactTag extends React.Component{
			constructor(props){
				super(props);
				this.state={
					state1:"状态1",
					state2:"状态2",
					clickCount:0
				};
				this.buttonClick = this.buttonClick.bind(this);
			}
			buttonClick(){
				//this.setState({...this.state, clickCount:this.state.clickCount+1});
				this.setState({clickCount:this.state.clickCount+1});
			}
			render(){
				const {prop1,prop2}=this.props;
				const {state1, state2,clickCount}=this.state;
				return (
					<div style={{backgroundColor:'#aaeeff'}}>
						<span>React自定义组件，属性1：{prop1}，属性2：{prop2}，状态1：{state1}，状态2：{state2}，点击数：{clickCount}。</span>
						<input type="button" value="按钮" onClick={this.buttonClick} />
					</div>);
			}
		}

		//http://www.runoob.com/react/react-install.html
		ReactDOM.render(<MyReactTag prop1="子组件属性1" prop2="子组件属性2" />, document.getElementById('reactArea'));
	</script>
</body>

</html>